/**
* @Description:    页面顶部banner
* @Author:         TSY 
* @Email:          t@tsy6.com
* @CreateDate:     2019/4/9 21:52
*/
<template>
    <div class="top" :style="{height: height}">
        <div class="box">
            <slot>
                <div class="title">
                    <span class="special">{{ text }}</span>
                </div>
            </slot>
        </div>
        <img :src="img" alt="">
    </div>
</template>

<script lang="ts">
    import Vue from 'vue'
    import Component from 'vue-class-component'
    import {Prop} from "vue-property-decorator";

    @Component({
        name: 'TopBanner'
    })
    export default class TopBanner extends Vue {
        //banner图
        @Prop({default: require('@/assets/coding.jpg')}) img: string;

        //banner文字
        @Prop({default: ''}) text: string;

        //banner高度
        @Prop({default: '350px'}) height: string;
    }
</script>

<style lang="stylus" scoped>
    @import "../style/common.styl"

    .top {
        position relative
        width 100%
        height 650px
        overflow hidden
        .box {
            position absolute
            width 100%
            height 100%
            top 0
            left 0
            flexContent()
            flex-direction column
            background rgba(0, 0, 0, .7)
            color white
            .title {
                font-size 50px
                .special {
                    color orange-color
                }
            }
            .subtitle {
                margin-top 10px
                font-size 34px
            }
        }
        img {
            width 100%
            height 100%
            object-fit cover
        }
    }
</style>